<template>
  <div class="content">
    <!-- 地图 -->
    <div class="flyline-chart-wrap" style="width: 100%;height: 600px;">
      <bv-flyline-chart :config="config" style="width:100%;height:100%;" @click="onClick"></bv-flyline-chart>
    </div>
    <!-- 地图 -->
  </div>
</template>

<script setup>

const onClick = (point) => {
  console.log(point);
};

const config = {
  points: [
    {
      name: '徐州',
      coordinate: [0.67, 0.54],
      halo: {
        show: true,
      },
      icon: {
        src: 'https://wangbin3162.gitee.io/bin-files/other/mapPoint.png',
        width: 30,
        height: 30
      }
    },
    {
      name: '北京',
      coordinate: [0.65, 0.40],
      halo: {
        show: true,
        color: '#8378ea'
      }
    },
    { name: '上海', coordinate: [0.71, 0.62] },
    { name: '南京', coordinate: [0.68, 0.59] },
    { name: '广州', coordinate: [0.61, 0.80] },
    { name: '黑龙江', coordinate: [0.75, 0.23] },
    {
      name: '郑州',
      coordinate: [0.59, 0.55],
      halo: {
        show: true,
        color: '#37a2da'
      }
    },
    { name: '荣成', coordinate: [0.69, 0.47] },
    { name: '青海', coordinate: [0.38, 0.50] },
    { name: '西藏', coordinate: [0.25, 0.62] },
    { name: '内蒙古', coordinate: [0.51, 0.39] },
    { name: '呼和浩特', coordinate: [0.19, 0.43] },
    { name: '海南', coordinate: [0.56, 0.88] },
    { name: '武汉', coordinate: [0.54, 0.65] },
    { name: '四川', coordinate: [0.46, 0.61] },
  ],
  lines: [
    { source: '徐州', target: '徐州' },
    { source: '北京', target: '徐州', color: '#fb7293', width: 2 },
    { source: '上海', target: '徐州', color: '#8378ea' },
    { source: '南京', target: '徐州', color: '#8378ea' },
    { source: '广州', target: '徐州' },
    { source: '黑龙江', target: '徐州' },
    { source: '郑州', target: '徐州', color: '#fb7293', width: 2 },
    { source: '荣成', target: '徐州', color: '#8378ea' },
    { source: '青海', target: '徐州' },
    { source: '西藏', target: '徐州', color: '#8378ea' },
    { source: '内蒙古', target: '徐州' },
    { source: '呼和浩特', target: '徐州' },
    { source: '海南', target: '徐州' },
    { source: '武汉', target: '徐州', color: '#37a2da' },
    { source: '四川', target: '徐州' },
  ],
  icon: {
    show: true,
    src: 'https://wangbin3162.gitee.io/bin-files/other/mapPoint.png',
  },
  text: {
    show: true
  }

};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 600px;
  background-image: url('/public/B2.webp');
}
</style>
